<template>
  <div>
    <el-row>
      <el-card>
        <el-form>
          <el-row>
            <el-col :span="8"
              ><div class="grid-content bg-purple">
                <el-form-item label="司机账号">
                  <el-input
                    style="width: 70%"
                    v-model="formData.id"
                    placeholder="请输入司机账号"
                  ></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="8"
              ><div class="grid-content bg-purple-light">
                <el-form-item label="司机姓名">
                  <el-input
                    style="width: 70%"
                    placeholder="请输入司机姓名"
                  ></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="8"
              ><div class="grid-content bg-purple">
                <el-form-item label="司机手机号">
                  <el-input
                    placeholder="请输入司机手机号"
                    style="width: 70%"
                  ></el-input>
                </el-form-item></div
            ></el-col>
          </el-row>
          <el-row>
            <el-col :span="8"
              ><div class="grid-content bg-purple-light">
                <el-form-item label="所属机构">
                  <el-input
                    style="width: 70%"
                    placeholder="请选择所属机构"
                    v-model="formData.name"
                  ></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="16">
              <el-button type="primary" @click="submit">搜索</el-button>
              <el-button @click="chongzhi">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </el-row>
    <el-row style="margin-top: 20px">
      <el-card>
        <el-col>
          <el-table
            border
            stripe
            style="text-align: center; margin-top: 15px; margin-bottom: 20px"
            :data="tableDate"
          >
            <el-table-column
              type="index"
              width="50"
              label="序号"
            ></el-table-column>
            <el-table-column prop="account" label="司机账号"></el-table-column>
            <el-table-column prop="name" label="司机姓名"></el-table-column>
            <el-table-column prop="mobile" label="司机电话"></el-table-column>
            <el-table-column label="关联车辆">
              <template #default="{ row }">
                {{ row.truck.licensePlate }}
              </template>
            </el-table-column>
            <el-table-column prop="intoStorageTime" label="所属机构">
              <template #default="{ row }">
                {{ row.agency.name }}
              </template>
            </el-table-column>
            <el-table-column label="工作状态">
              <template #default="{ row }">
                <span :class="row.workStatus === 0 ? 'span1' : 'span2'"></span>
                <span>{{ row.workStatus === 0 ? "不上班" : "上班" }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="140">
              <template #default="{ row }">
                <el-button
                  @click="tiao(row.id)"
                  style="color: deepskyblue"
                  type="text"
                  >查看</el-button
                >
                <span style="margin: 7px; color: #ccc">|</span>
                <el-button style="color: deepskyblue" type="text"
                  >配置车辆</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            style="margin-bottom: 20px"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="this.page.page"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="this.page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-col>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import { getSiJiListApi } from "@/api/employee";

export default {
  data() {
    return {
      formData: [],
      tableDate: [],
      total: 100,
      page: {
        page: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    this.getSiJiListInfo();
  },
  methods: {
    submit() {},
    chongzhi() {},
    tiao(id) {
      console.log(id);
      this.$router.push(`/Siji/${id}`);
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getSiJiListInfo();
    },
    handleCurrentChange(val) {
      this.page.page = val;
      this.getSiJiListInfo();
    },
    async getSiJiListInfo() {
      const res = await getSiJiListApi(this.page);
      console.log(res.data.data);
      this.total = +res.data.data.counts;
      this.tableDate = res.data.data.items;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-form {
  ::v-deep .el-form-item__label {
    width: 96px;
  }
}
.el-pagination {
  text-align: center;
}
.el-table .cell .span1 {
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: red;
  border-radius: 50%;
  margin-right: 4px;
}
.el-table .cell .span2 {
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: rgb(29, 199, 121);
  border-radius: 50%;
  margin-right: 4px;
}
</style>
